<div class="user-register-container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        用户注册
      </h3></div>
      <div class="panel-body">
        <form  [formGroup]="userForm" (ngSubmit)="doRegister()" class="form-horizontal" role="form" novalidate>
          <div class="form-group" [ngClass]="{'error': formErrors.userName}">
            <label class="col-sm-3 control-label">用户名</label>
            <div class="col-sm-8">
              <input type="text" class="form-control"
                     placeholder="用户名"
                     required
                     formControlName="userName"
            >
              <div class="text-danger" *ngIf="formErrors.userName">{{formErrors.userName}}</div>
            </div>
          </div>

          <div class="form-group" [ngClass]="{'error': formErrors.nickName}">
            <label class="col-sm-3 control-label">昵称</label>
            <div class="col-sm-8">
              <input type="text" class="form-control"
                     placeholder="昵称"
                     required
                     name="nickName"
                     formControlName="nickName"
              >
              <div class="text-danger" *ngIf="formErrors.nickName">{{formErrors.nickName}}</div>
            </div>
          </div>

          <div class="form-group" [ngClass]="{'error': formErrors.nickName}">
            <label class="col-sm-3 control-label">常用邮箱</label>
            <div class="col-sm-8">
              <input type="text" class="form-control"
                     placeholder="常用邮箱，验证后才能登录"
                     required
                     name="email"
                     formControlName="email"
              >
              <div class="text-danger" *ngIf="formErrors.email">{{formErrors.email}}</div>
            </div>
          </div>

          <div class="form-group" [ngClass]="{'error': formErrors.password}">
            <label class="col-sm-3 control-label">密码</label>
            <div class="col-sm-8">
              <input type="password" class="form-control"
                     placeholder="密码"
                     required
                     validateEqual="confirmPassword"
                     reverse=true
                     name="password"
                     formControlName="password"
              >
              <div class="text-danger" *ngIf="formErrors.password">{{formErrors.password}}</div>
            </div>
          </div>

          <div class="form-group" [ngClass]="{'error': formErrors.confirmPassword}">
            <label class="col-sm-3 control-label">重复密码</label>
            <div class="col-sm-8">
              <input type="password" class="form-control"
                     placeholder="重复密码，两次输入必须一致"
                     required
                     validateEqual="password"
                     name="confirmPassword"
                     formControlName="confirmPassword"
              >
              <div class="text-danger" *ngIf="formErrors.confirmPassword">{{formErrors.confirmPassword}}</div>
            </div>
          </div>
          <div *ngIf="formErrors.formError" class="col-sm-offset-3 col-sm-8 alert alert-danger">{{ formErrors.formError }}</div>
          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
              <button [disabled]="userForm.invalid" type="submit" class="btn btn-success">注册</button>
            </div>
          </div>

        </form>
      </div>

  </div>
</div>
